<template>
    <div class="home-session" :class="{show:useStore.homeIsShow}">
        <Home/>
    </div>
    <div class="other-session" :class="{show:useStore.otherIsShow}">
        <RouterView v-slot="{ Component}">
            <KeepAlive>                
                <component :is="Component" :key="getComponentKey(useStore.activePath)"></component>
            </KeepAlive>
        </RouterView>
    </div>
</template>

<script setup>
import {mainStore} from '@/stores/store'
import Home from '@/views/Home.vue'
import {useRouter} from 'vue-router'

let useStore = mainStore()
let router = useRouter()
let linksRoutes = router.getRoutes().filter(v=>v.meta.cust_type === 0 ) //过滤出链接路由
useStore.setLinkRoutes(linksRoutes)

/**
 * 生成动态组件的唯一 Key
 * @param {String} activePath 当前激活的路径
 * 通过组合组件名和独立刷新标识，确保每次刷新生成唯一key(newKey)
 * 其他未激活 Tab 的 Key 保持不变，KeepAlive 维持缓存 
 * 激活 Tab 的 Key 变化，触发组件的卸载和重新挂载，实现刷新    
 * @returns {String} 组件 newKey
 */
const getComponentKey = (activePath) => {
  const tab = useStore.linksRoutes.find(t => t.path === activePath)
  const newKey = tab ? `${tab.path}__${tab.meta.reLoadKey}` : activePath
  return newKey // 唯一标识符
}



</script>

<style lang="less" scoped>
    .home-session,.other-session{
        height: 100%;
        width: 100%;
        display: none;
    }
    .home-session.show,.other-session.show{
        display: block;
    }

</style>